<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button id="button" disabled>butotn</button>
<style>
	:disabled, [disabled], [aria-disabled="true"] {
		cursor: not-allowed;
	}
</style>
<br><br>
<button id="button2">butotn</button>
<style>
	#button2{
		cursor:none;
	}
</style>
<br><br>
<div id="div1"></div>
<style>
	#div1{
		height:40px;
		width: 40px;
		background: #ccc;
		position:relative;
		border:1px solid #aaa;
		box-shadow: 0 0 3px #aaa;
		cursor:pointer;
	}
	#div1::before {
		content: '';
		position: absolute;
		top:-10px;right:-10px;
		bottom:-10px; left:-10px;
	}
</style>
<br><br>
<div id="div2">
	<input type="checkbox" id="awesome1"  />
	<label for="awesome1">Awesome!</label>
</div>
<style>
	#div2 input[type="checkbox"] + label::before{
		content:'\a0'; /* 不换行空格*/
		display: inline-block;
		vertical-align: .2em;
		width: .8em;
		height: .8em;
		margin-right:.2em;
		border-radius:.2em;
		background:silver;
		text-indent:.15em;
		line-height: .65;
	}
	#div2 input[type="checkbox"]:checked + label::before {
		content: '\2713';
		background:yellowgreen;
	}
	#div2 input[type="checkbox"] {
		position:absolute;
		clip:rect(0,0,0,0);
	}
	#div2 input[type="checkbox"]:focus + label::before {
		box-shadow:0 0 .1em .1em #58a;
	}
	#div2 input[type="checkbox"]:disabled + label::before {
		background: gray;
		box-shadow:none;
		color:#555;
	}
</style>

<br><br>

<div id="div3">
	<input type="checkbox"  id="awesome2"/>
	<label for="awesome2">Awesome!</label>
</div>
<style>
	#div3 input[type="checkbox"] {
		position:relative;
		clip:rect(0,0,0,0);
	}
	#div3 input[type="checkbox"] + label {
		display:inline-block;
		padding:.3em .5em;
		background:#ccc;
		background-image:linear-gradient(#ddd,#bbb);
		border:1px solid rgba(0,0,0,.2);
		border-radius: .3em;
		box-shadow:0 1px white inset;
		text-align:center;
		text-shadow:0 1px 1px white;
	}
	#div3 input[type="checkbox"] {
		position:absolute;
		clip:rect(0,0,0,0);
	}
	#div3 input[type="checkbox"]:checked +label,
	#div3 input[type="checkbox"]:active + label {
		box-shadow:.05em .1em .2em rgba(0,0,0,.6)inset;
		border-color: rgba(0,0,0,.3);
		background:#bbb;
	}
</style>

<br><br>

<div id="div4">
	<main class="de-emphasized">Bacon Ipsum dolor sit amet...</main>
	<dialog>
		O HAI, I'm a dialog. Click on me to dismiss.
	</dialog>
</div>
<style>
	#div4 main.de-emphasized {
		-webkit-filter:blur(5px);
		filter:blur(5px);
	}
	#div4 main {
		transition:.6s filter;
	}
	#div4 input[type="checkbox"] {
		position:absolute;
		clip:rect(0,0,0,0);
	}
	#div4 input[type="checkbox"]:checked +label,
	#div4 input[type="checkbox"]:active + label {
		box-shadow:.05em .1em .2em rgba(0,0,0,.6)inset;
		border-color: rgba(0,0,0,.3);
		background:#bbb;
	}
</style>

<br><br>

<div id="div5">
	<ul>
		<li>Ada Catlace</li>
		<li>Alan Purring</li>
		<li>Schrödingcat</li>
		<li>Tim Purrners-Lee</li>
		<li>WebKitty</li>
		<li>Json</li>
		<li>Void</li>
		<li>Neko</li>
		<li>NaN</li>
		<li>Cat5</li>
		<li>Vector</li>
		<li>Ada Catlace</li>
		<li>Alan Purring</li>
		<li>Schrödingcat</li>
		<li>Tim Purrners-Lee</li>
		<li>WebKitty</li>
		<li>Json</li>
		<li>Void</li>
		<li>Neko</li>
		<li>NaN</li>
		<li>Cat5</li>
		<li>Vector</li>
	</ul>
</div>
<style>
	#div5 ul {
		overflow:auto;
		width:10em;
		height:8em;
		padding:.3em .5em;
		border:1px solid silver;
	}
	#div5 ul {
		background:linear-gradient(
			white,
			hsla(0,0%,100%,0),
			hsla(0,0%,100%,0),
			white
		),
		radial-gradient(at top,
			rgba(0,0,0,.2),
			transparent 70%
		),
		radial-gradient(ellipse at bottom,
			rgba(0,0,0,.2) -15px,
			transparent 50%
		) 0 100%;
		background-size: 100% 100%, 100% 2em, 100% 2em;
		background-repeat:no-repeat,no-repeat;
		background-attachment:local,scroll,scroll;
	}
</style>

<br><br>
<div id="div22"></div>
<style>
	#div22{
		width:200px;
		height:200px;
		border:1px solid red;
		background:
			linear-gradient(0deg,red 0px, #ff4bd5 50px,#02ff82 100px, #ffec2a 150px, #0c02ff 200px) 20px 20px no-repeat,
			radial-gradient(red 0px, #ff4bd5,transparent 70%) -20px -20px no-repeat;
	}
</style>



<div class="image-slider">
	<div>
		<img src="../w653.jpg" alt="Before" />
	</div>
	<img src="../w658.jpg" alt="After" />
</div>
<style>
	.image-slider {
	position:relative;
	display:inline-block;
}
.image-slider >div {
	position:absolute;
	top:0; bottom:0; left:0;
	width:50%; /* 初始宽度*/
	overflow:hidden; /* 让它可以裁切图片*/
	-webkit-resize: horizontal;
	resize: horizontal;
	border:1px solid red;
}
.image-slider img {
	display:block;
	user-select:none;
}
.image-slider> div::before{
	content: '';
	position:absolute;
	bottom:0; right:0;
	width:12px; height:12px;
	padding: 5px;
	background:
		linear-gradient(-45deg,white 50%,transparent 0);
	background-clip:content-box;
	cursor:ew-resize;
}
</style>



</body>
</html>